<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>宿舍管理</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div>
    <el-button type="success" @click="dialogAddState=true" >
      <el-icon><Plus /></el-icon>  添加
    </el-button>
  </div>
<!-- 数据表格 -->
  <div style="margin:20px">
    <el-table :data="dormitoryInfo" stripe border style="width: 100%">
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="position" label="位置"/>
      <el-table-column prop="type" label="房间类型"/>
      <el-table-column prop="dorno" label="房间号"/>
      <el-table-column prop="contain" label="可容纳人数"  />
      <el-table-column prop="attri" label="宿舍属性"  />
      <el-table-column prop="occupy" label="是否已满"  />
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button
              size="small"
              type="primary"
              @click="tableEditHandler(scope.$index, scope.row)">
            <el-icon><Edit /></el-icon>编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <div class="page">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,8]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="sizes, prev, pager, next"
        :total="totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!--添加 -->
  <el-dialog v-model="dialogAddState" title="添加宿舍信息" width="380">
    <div>
      <el-form ref="formAddRef" :rules="formAddRules" :model="formAdd" label-width="120px">
        <el-form-item prop="position" label="位置所在">
          <el-input v-model="formAdd.position" maxlength="6" show-word-limit></el-input>
        </el-form-item>
        <el-form-item prop="type" label="房间类型">
          <el-input v-model="formAdd.type" maxlength="3"></el-input>
        </el-form-item>
        <el-form-item prop="dorno" label="房间号">
          <el-input v-model="formAdd.dorno" maxlength="3" show-word-limit></el-input>
        </el-form-item>
        <el-form-item prop="contain" label="可容纳人数">
          <el-input v-model="formAdd.contain" maxlength="1" show-word-limit></el-input>
        </el-form-item>
        <el-form-item prop="attri" label="宿舍属性">
          <el-input v-model="formAdd.attri" maxlength="4"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogAddOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogAddOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!--  编辑-->
  <el-dialog v-model="dialogEditState" title="修改宿舍信息" width="380">
    <div>
      <el-form ref="formEditRef" :model="formEdit"
               :rules="formEditRules"
               label-width="120px">
        <el-form-item prop="id">
          <el-input v-model="formEdit.id" type="hidden"  disabled></el-input>
        </el-form-item>
        <el-form-item prop="attri" label="宿舍属性">
          <el-input v-model="formEdit.attri" maxlength="4"></el-input>
        </el-form-item>
        <el-form-item prop="occupy" label="是否已满">
          <el-select
              v-model="formEdit.occupy">
            <el-option label="已满员" value="已满员"></el-option>
            <el-option label="未满员" value="未满员"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogEditOnReset">取消</el-button>
        <el-button type="primary"  @click="dialogEditOnSubmit" >确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>

import {ArrowRight, Delete, Edit, Plus} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import request from "../../../utils/freshman";
import {ElMessage} from "element-plus";
onMounted(()=>{
  getDorm();
})
//分页
const currentPage = ref(1)
const pageSize = ref(8)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let totals=ref(0);
////数据表格
const dormitoryInfo=ref([])
const getDorm=()=>{
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    // 初始时不包含其他参数
  };
  request({
    url:'/dorm/all',
    method:'get',
    params,
  }).then((req)=>{
    console.log(req)
    if (200==req.data.errorCode){
      dormitoryInfo.value=req.data.data.records;
      totals.value=req.data.data.total;
    }
  })
}
const handleSizeChange = (val) => {
  pageSize.value=val;
  getDorm()
}
const handleCurrentChange = (val) => {
  currentPage.value=val;
  getDorm()
}
///////////////编辑
//编辑
const formEditRef = ref()
const formEditData = {
  id:'',
  attri:'',
  occupy:''
}
//编辑的校验规则
const formEditRules={
  attri: [
    { required: true, message: '请输入属性', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '属性必须为中文', max:4,trigger: 'blur' }
  ]
};

// 编辑表单绑定数据模型
const formEdit = reactive({...formEditData})
const tableEditHandler = (rowIndex , rowData) => {
  console.log("-------------")
  console.log(rowIndex)
  console.log(rowData)

  formEdit.id = rowData.id
  formEdit.occupy = rowData.occupy
  formEdit.attri = rowData.attri
  dialogEditState.value = true
}
const dialogEditState = ref(false)
const dialogEditOnSubmit = () => {
  request({
    url:'/dorm/update',
    method:'put',
    data:JSON.stringify(formEdit),
    headers:{'content-type' : "application/json;charset=UTF-8"}
  }).then(req=>{
    if (200==req.data.errorCode){
      ElMessage({
        type: 'success',
        message: '修改成功！',
      });
      getDorm();
    }
  })
  dialogEditState.value = false
}
const dialogEditOnReset = () => {
  Object.assign(formEdit , formEditData)
  dialogEditState.value = false
}
///////////////////////添加
const dialogAddState = ref(false)
const formAddRules={
  position: [
    { required: true, message: '请输入哪栋楼', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '只能输入汉字', trigger: 'blur' },
    { max: 8, message: '长度不能超过8个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请输入房间类型', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '房间类型必须为中文', trigger: 'blur' }
  ],
  contain: [
    {required: true, message: '请输入可容纳人数', trigger: 'blur' },
    {pattern: /^\d{1}$/, message: '必须为1位数字', trigger: 'blur'}
  ],
  dorno: [
    {required: true, message: '请输入房间号', trigger: 'blur' },
    {pattern: /^\d{3}$/, message: '必须为3位数字', trigger: 'blur'}
  ],
  attri: [
    { required: true, message: '请输入属性', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '属性必须为中文', trigger: 'blur' }
  ]
};
const dialogAddOnSubmit = () => {
  request({
    method:'post',
    url:'/dorm/add',
    params:formAdd,
  }).then(req=>{
    if (200 == req.data.errorCode){
      ElMessage({
        type:'success',
        message:req.data.msg
      })
      Object.assign(formAdd , formAddData)
      getDorm();
    }
  })
  dialogAddState.value=false;
}
const dialogAddOnReset = () => {
  // 清空表单数据
  Object.assign(formAdd , formAddData)
  // 关闭对话框
  dialogAddState.value = false
}
// 新增表单引用
const formAddRef = ref()
// 新增表单初始化数据
const formAddData = {
  dorno:'',
  position:'',
  type:'',
  contain:'',
  attri:''
}
// 新增表单绑定数据模型
const formAdd = reactive({...formAddData})   // ...formAddData 解构formAddData
</script>
<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
.page{
  margin-left: 30%;
}
</style>